<template>
  <div>
    <Editor
      :id="tinymceId"
      v-model="myValue"
      :init="init"
      :disabled="disabled"
    ></Editor>
  </div>
</template>

<script>
import tinymce from "tinymce/tinymce"; //tinymce默认hidden，
import Editor from "@tinymce/tinymce-vue"; //编辑器引入
import "tinymce/themes/silver/theme"; //编辑器主题
import "tinymce/icons/default"; //引入编辑器图标icon
import "tinymce/models/dom";
import "tinymce/plugins/link"; //超链接
import "tinymce/plugins/image"; //插入编辑图片
import "tinymce/plugins/lists"; //列表插件
import "tinymce/plugins/charmap"; //特殊字符
import "tinymce/plugins/media"; //插入编辑媒体
import "tinymce/plugins/wordcount"; // 字数统计
import "tinymce/plugins/table";
import "tinymce/plugins/advlist";
import "tinymce/plugins/autolink";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/preview";
export default {
  name: "HomeView",
  // 注册组件
  components: {
    Editor,
  },
  data() {
    return {
      myValue: "",
      tinymceId: "",
      init: {
        selector: "#tinymce",
        language_url: "./tinymce/langs/zh-CN.js", //汉化路径是自定义的
        language: "zh_CN",
        skin_url: "/tinymce/skins/ui/oxide", //皮肤
        plugins: this.plugins, //插件 //工具栏
        toolbar: this.toolbar,
        toolbar_location: "/",
        fontsize_formats:
          "12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", //字体大小
        height: 500, //高度
        placeholder: "富文本文件",
        branding: false, //隐藏右下角技术支持
      },
    };
  },
  props: {
    //内容
    value: {
      type: String,
      default: "",
    }, //是否禁用
    disabled: {
      type: Boolean,
      default: false,
    }, //插件
    plugins: {
      type: [String, Array],
      default: () => ['advlist','autolink','link'],
    }, //工具栏
    toolbar: {
      type: [String, Array],
      default:
        "undo redo |  formatselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent lists image | fullscreen | preview",
    },
  },
  //监听内容变化
value(newValue) {
   this.myValue = newValue || ''
},
mounted() {
   tinymce.init({})
},
};
</script>
